<template>
	
	<!--
	 1. 导航栏： 包括  1. 状态栏  2.内容区域
	 2. 关于状态栏
	    -- （自带的，不同手机占位高度是不一样的，所以需要获取系统中的高度uni.getSystemInfoSync），所以需要计算状态栏的高度setNavSize 中statusBarHeight
     3.内容区域 根据系统来计算高度的
			 
	4.自适应的单位用rpx  可以随着机型的不同进行自适应， px = 实际宽度/750 * rpx  所以需要看ui给的设计稿是，如果iphone6  宽度似乎375      1px *750/375 = 2rpx  所以还需要找ui确认设计稿宽度
	
	5. 封装组件的概念
	  1）组件功能
	  2）组件属性。【对于复用性的组件， 那就需要从外部给组件传参、比如组件的背景颜色、字体大小， 图标等】
	  
	6. 导航栏一般包括点下到首页和可以返回上一页的按钮部分，这时需要判断页面栈的数量，   是通过  getCurrentPages().length 来获取
	7. 跳转 ：
	   1） 若是应用内的跳转用的是navigateTo
	   2）若是tabarBar 菜单栏跳转则需要用switchTab
	   3） 返回上一层页面，则是用uni.navigateBack)
	8. 当导航栏中有搜索框时， 它的宽度，我们还得考虑下手机右上角胶囊按钮的宽度， 才能确定搜索框的宽度
	   1）获取胶囊的宽度的api  getMenuButtonBoundingClientRect()
	   在小程序平台，如果原生导航栏被隐藏，仍然在右上角会有一个悬浮按钮，微信下也被称为胶囊按钮。
	
	9. 样式上
	   1） 在弹性布局中，如何让宽度自适应， 可以设置flex:1;
	
	
	总结：（关注重点）
	   1.导航栏要考虑状态栏高度与内容区高度，【状态栏属性高度uni.getSystemInfoSync】
	   2. 要考虑胶囊按钮影响的布局（胶囊按钮位置信息获取getMenuButtonBoundingClientRect()）
	   3. 还有页面栈为1 与大于1的场景
	   4. 以及复用组件的统一设置属性等
	   5. 要去掉默认导航栏设置，改成自定义模式【navigationStyle】
	     {
	     	"path": "pages/index/index",
	     	"style": {
	     		"navigationBarTitleText": "uni-app",
	     		//navigationStyle为custom ，表示自定义导航栏，去除原来自带的导航栏样式
	     		"navigationStyle":"custom"
	     	}
	     }
	   
	-->
	
	<view class="nav">
		<!--机型自带的状态栏高度-->
		<view :style="'height:'+status+'rpx;'+ containerStyle"></view>
		<!--导航内容区-->
		<view v-if="isHome" class="headNav" :style="'height:'+navHeight+'rpx; line-height:'+navHeight+'rpx; padding-left:20rpx;'">
			<!--陪诊项目中首页特殊的导航栏内容-->
			<text class="city">中部地区</text>
			<!--
			  1. menu*2 是要将px 转化为rpx的
			  2. margin-top:(menu.top*2 -status)  原因是胶囊按钮的margin-top值是包含状态栏高度的部分，所以需要扣除
			-->
			<view style="flex:1;">
				<navigator url="../../pages/search/index" 
				:style="'height:' + menu.height*2 +'rpx;line-height:' + menu.height*2 +
				'rpx;margin-top:'+
				(menu.top*2 -status)+
				'rpx;margin-left: 32rpx;margin-right:'+
				(menu.width*2 +24)+
				'rpx;background: #f4f4f4; border-radius: 200rpx;text-align:center'
				"
				
				>
					<text class="search-text">找医院</text>
				</navigator>
			</view>
		</view>
        <view v-else class="navbar" :style="'height:'+navHeight+'rpx;' + containerStyle">
			<view class="back-icon" @click="backHome">
				<!--页面栈为1，点击返回到首页-->
				<image v-if="pages>1" src="../../static/resource/navbar/ic_back.png"></image>
				<!--如果是首页则不显示返回的图标-->
				<image v-else src="../../static/resource/navbar/ic_home.png"></image>
			</view>
			<view class="nav-title" v-if="titleText">
				<view :style="'height:'+navHeight+'rpx; line-height:'+navHeight+'rpx;'">{{titleText}}</view>
			</view>
		</view>	
	</view>
</template>

<script setup>
import { onBeforeMount,ref,reactive,defineProps,defineEmits } from 'vue';
 //复用组件样式属性
  let  props = defineProps({
	  background:{
		  type: String,
		  default: 'rgb(255,255,255,1)'
	  },
	  color:{
		  type: String,
		  default:'rgb(0,0,0,1)'
	  },
	  fontSize:{
		  type:String,
		  default: 32
	  },
	  iconWidth:{
		  type: String,
		  default: 116
	  },
	  iconHeight:{
		  type: String,
		  default: 38
	  },
	  titleText:{
		  type: String,
		  default: ""
	  },
	  //是不是首页的效果
	  isHome:{
		  type: Boolean,
		  default: false
	  }
  })
  const emist = defineEmits(['onNavBarAttached'])
	onBeforeMount(()=>{
			setNavSize()
			setStyle()
			emist('onNavBarAttached',{
				detail:{
					statusHeight: status.value,
					navHeight: navHeight.value,
					navBarHeight:status.value + navHeight.value
			}})
	})
	//状态栏高度
	const status = ref(0)
	//内容高度
	const navHeight = ref(0)
	//背景颜色
	const containerStyle = ref('')
	//字体样式
	const textStyle = ref('')
	//图标的样式
	const iconStyle = ref('')
	//页面栈的数量
	const pages = ref(getCurrentPages().length)
	
	//获取胶囊按钮的位置
	const menu = reactive(uni.getMenuButtonBoundingClientRect())
	
	
	//1. 计算状态栏高度
	const setNavSize = () => {
		// const res = uni.getSystemInfoSync()
		// console.log(res,"返回")
		const {system,statusBarHeight} = uni.getSystemInfoSync()
		//由于statusBarHeight得到的是以px为单位的值，需要转化为rpx，因为rpx是响应式的px会随着机型的不同，而响应式变化
		//故需要statusBarHeight*2
		status.value = statusBarHeight * 2
		
		//针对当前的机型做个判断
		const isiOS =  system.indexOf('iOS')> -1
		if(!isiOS){
			//若不是iOS
			navHeight.value = 96
				
			}else {
				navHeight.value = 88
			}
			
		}
		
		//样式设置
		const setStyle = () => {
			//.join 是为了转字符串 通过数组的方式转成字符串拼接
			containerStyle.value = ['background:'+ props.background].join(';')
			textStyle.value = ['color:'+ props.color,'font-size:'+props.fontSize+'rpx'].join(';')
			iconStyle.value = ['width:'+props.iconWidth + 'rpx','height:'+props.iconHeight+'rpx'].join(';')
		}
		
		const backHome = () => {
			if(pages.value >1 ){
				//关闭当前页，返回上一层页面
				uni.navigateBack()
			}else{
			 //若是首页	，tabar跳转用 switchTab
			   uni.switchTab({
			   	url: '/pages/index/index'
			   })
			  
			}
		}


</script>

<style>
	.nav{
		position: flxed;
		width: 100%;
		top:0;
		letf:0;
		z-index:2
		
	}
	
	.back-icon{
		display: flex;
		align-items: center;
		width: 64rpx;
		height: 100%;
		margin-left:20rpx
		
	}
	
	.back-icon image{
		width: 64rpx;
		height: 64rpx;
	}
	.navbar{
		position: relative;
	}
	.nav-title{
		position: absolute;
		top: 0;
		left: 50%;
		transform: translate(-50%)
		
	}
	
	
	
	
	
	
	.headNav{
		display: flex;
	}
	
	
	.city {
	    display: inline-block;
	    position: relative;
	    font-size: 30rpx;
	    font-weight: bold;
	    padding-left: 55rpx;
	    background: url()
	        no-repeat left center;
	    background-size: 40rpx;
	}
	
	.city:after {
	    content: ' ';
	    display: inline-block;
	    height: 6px;
	    width: 6px;
	    border-width: 1px 1px 0 0;
	    border-color: #353535;
	    border-style: solid;
	    -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
	    transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
	    position: relative;
	    top: -2px;
	    position: absolute;
	    top: 50%;
	    margin-top: -4px;
	    right: -10px;
	}

	
		.search-text {
		    display: inline-block;
		    padding-left: 30rpx;
		    color: #bbbbbb;
		    font-size: 26rpx;
		    background: url()
		        no-repeat left center;
		    background-size: 23rpx;
		}


</style>
